import React from 'react'
import {LoginOutlined} from '@ant-design/icons'
import { Layout, Menu, Dropdown, Avatar, Select, Button, Typography } from 'antd';
import {EnvironmentTwoTone} from '@ant-design/icons'
import {Link,withRouter} from 'react-router-dom'
import { connect } from 'react-redux';
import {useEffect,useState} from 'react'
import  { Suspense } from 'react';
import { RollbackOutlined } from '@ant-design/icons';

import SeoContainer from '&components/seo-container';
import Header from '&widgets/header';
import FSMSider from '&widgets/FSMSider'

import styles from './styles.module.less';

import average from '../../../assets/average.png'
import hotPhoto from '../../../assets/hotPhoto.png'
import loss from '../../../assets/loss.png'
import redis from '../../../assets/redis.png'
import speed from '../../../assets/speed.png'
import HotMap from '../../home/admin/hotmaps'
import FcLine from '../../subPages/FSMPages/fcLine'
import LtLine from '../../subPages/FSMPages/ltLine'
import RtLine from '../../subPages/FSMPages/rtLine'
import SvLine from '../../subPages/FSMPages/svLine'
import AverageRateLine from '../../subPages/FSMPages/averageRateLine'
import LtCurve from "../../subPages/FSMPages/LtCurve";
import RtCurve from "../../subPages/FSMPages/RtCurve";
import SvCurve from "../../subPages/FSMPages/SvCurve";
import FcCurve from "../../subPages/FSMPages/FcCurve";
import './index.css'


const { Content } = Layout;
const { Title, Text } = Typography;
const {Option, OptGroup } = Select;
function EquipmentMsg(props){
  const {setChoice} = props;
  const {get2DAnd3D, getBackImg} = props;
  // console.log(props);
  // let equip = props.equip
  // const [equip, setEquip] = useState({})
  const equip = props.equip
  const equip1 = {
    equipId: equip.equipId,
    type:1,
    choice:0,
  }
  const equip2 = {
    equipId: equip.equipId,
    type:2,
    choice:0,
  }
  const equip3 = {
    equipId: equip.equipId,
    type:3,
    choice:0,
  }
  const equip4 = {
    equipId: equip.equipId,
    type:4,
    choice:0,
  }
  // console.log(get2DAnd3D);
  const [type, setType] = useState('折线图')
    function handleTubClick(e,key) {  
      console.log(key)
      setChoice({choice:key})
      if(type === '曲面图'){
        if (equipId) {
          get2DAnd3D(equip); //lt
          get2DAnd3D(equip2);
          get2DAnd3D(equip3);
          get2DAnd3D(equip4);
        }
      }
      setChoice({width:980, height:600})
    }
    function handleChange(value) {
      setType(value)
      if(value === '曲面图'){
        if (equip.equipId) {
          get2DAnd3D(equip1); //lt
          get2DAnd3D(equip2);
          get2DAnd3D(equip3);
          get2DAnd3D(equip4);
        }
        // setChoice({width:500, height:252})
      }
    }
    useEffect(()=>{
        // const token = localStorage.getItem('token')
        getBackImg()
    },[])
    const {choice} = props;
    console.log(equip);
    //choice判断要展示的图表
    switch (choice) {
      case 'all':
        switch (type) { //type判断图表类型
          case '折线图':
            return(
                <div className='equipContent'>
                  <div className='type_select' style={{width:100}}>
                    <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
                      <Option value="曲面图">曲面图</Option>
                      {/* <Option value="3D图">3D图</Option> */}
                      <Option value="折线图">折线图</Option>
                    </Select>
                  </div>
                  <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{equip.describe}</Title></div>
                  <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                  <div className='equipM_item'>
                      {/* <div className='hOts'>热点图<hotMap></hotMap><i className='inner_button'><Link to='/admin/adminHotMap'><LoginOutlined /></Link></i></div> */}
                      <div className='hOT'><LtLine></LtLine><i className='inner_button'><Button onClick={(e) => {handleTubClick(e,'lt')}} icon={<LoginOutlined />}></Button></i></div>
                      <div className='hOT averhot'><RtLine></RtLine><i className='inner_button'><Button onClick={(e) => {handleTubClick(e,'rt')}} icon={<LoginOutlined />}></Button></i></div>
                      <div className='hOT '><SvLine></SvLine><i className='inner_button'><Button onClick={(e) => {handleTubClick(e,'sv')}} icon={<LoginOutlined />}></Button></i></div>
                      <div className='hOT averhot'><AverageRateLine></AverageRateLine><i className='inner_button'><Button onClick={(e) => {handleTubClick(e,'avgRate')}} icon={<LoginOutlined />}></Button></i></div>
                  </div>
                </div>
            )
            break;
          case '曲面图':
            return(
              <div className = 'equipContent'>
                <div className='type_select' style={{width:100}}>
                  <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
                    <Option value="曲面图">曲面图</Option>
                    {/* <Option value="3D图">3D图</Option> */}
                    <Option value="折线图">折线图</Option>
                  </Select>
                </div>
                <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{equip.describe}</Title></div>
                <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                <div className='equipM_item'>
                    {/* <div className='hOts'>热点图</div> */}
                    <div className='hOT'><LtCurve></LtCurve><i className='inner_button'><Button onClick={(e) => {handleTubClick(e,'lt')}} icon={<LoginOutlined />}></Button></i></div>
                    <div className='hOT'><RtCurve></RtCurve><i className='inner_button'><Button onClick={(e) => {handleTubClick(e,'rt')}} icon={<LoginOutlined />}></Button></i></div>
                    <div className='hOT'><SvCurve></SvCurve><i className='inner_button'><Button onClick={(e) => {handleTubClick(e,'sv')}} icon={<LoginOutlined />}></Button></i></div>
                    <div className='hOT averhot'><FcCurve></FcCurve><i className='inner_button'><Button onClick={(e) => {handleTubClick(e,'avgRate')}} icon={<LoginOutlined />}></Button></i></div>
                </div>
              </div>
            )
        }
        break;
      case 'lt':
        switch(type){
          case '折线图':
            return (
              <div>
                <div className='type_select' style={{width:100}}>
                  <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
                    <Option value="曲面图">曲面图</Option>
                    <Option value="折线图">折线图</Option>
                  </Select>
                </div>
                <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{equip.describe}</Title></div>
                <LtLine></LtLine>
              </div>
            )
          case '曲面图':
            return (
              <div>
                <div className='type_select' style={{width:100}}>
                  <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
                    <Option value="曲面图">曲面图</Option>
                    <Option value="折线图">折线图</Option>
                  </Select>
                </div>
                <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{equip.describe}</Title></div>
                <LtCurve></LtCurve>
              </div>
            )
        }
        break;
      case 'rt':
        switch(type){
          case '折线图':
            return (
              <div>
                <div className='type_select' style={{width:100}}>
                  <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
                    <Option value="曲面图">曲面图</Option>
                    <Option value="折线图">折线图</Option>
                  </Select>
                </div>
                <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{equip.describe}</Title></div>
                <RtLine></RtLine>
              </div>
            )
          case '曲面图':
            return (
              <div>
                <div className='type_select' style={{width:100}}>
                  <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
                    <Option value="曲面图">曲面图</Option>
                    <Option value="折线图">折线图</Option>
                  </Select>
                </div>
                <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{equip.describe}</Title></div>
                <RtCurve></RtCurve>
              </div>
            )
        }
        break;
      case 'sv':
        switch(type){
          case '折线图':
            return (
              <div>
                <div className='type_select' style={{width:100}}>
                  <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
                    <Option value="曲面图">曲面图</Option>
                    <Option value="折线图">折线图</Option>
                  </Select>
                </div>
                <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{equip.describe}</Title></div>
                <SvLine></SvLine>
              </div>
            )
          case '曲面图':
            return (
              <div>
                <div className='type_select' style={{width:100}}>
                  <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
                    <Option value="曲面图">曲面图</Option>
                    <Option value="折线图">折线图</Option>
                  </Select>
                </div>
                <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{equip.describe}</Title></div>
                <SvCurve></SvCurve>
              </div>
            )
        }
        break;
      case 'avgRate':
        switch(type){
          case '折线图':
            return (
              <div>
                <div className='type_select' style={{width:100}}>
                  <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
                    <Option value="曲面图">曲面图</Option>
                    <Option value="折线图">折线图</Option>
                  </Select>
                </div>
                <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{equip.describe}</Title></div>
                <AverageRateLine></AverageRateLine>
              </div>
            )
          case '曲面图':
            return (
              <div>
                <div className='type_select' style={{width:100}}>
                  <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
                    <Option value="曲面图">曲面图</Option>
                    <Option value="折线图">折线图</Option>
                  </Select>
                </div>
                <Link to='/equipment/hotMap'><Button className={styles.linkStyle}><RollbackOutlined />返回设备列表</Button></Link> 
                <div style={{display: 'flex',textAlign:'center'}}><Title style={{margin:'0 auto'}}>{equip.describe}</Title></div>
                <FcCurve></FcCurve>
              </div>
            )
        }
        break;
      default:
      // return(
      //     <div>
      //       <div className='type_select' style={{width:100}}>
      //         <Select defaultValue="折线图" style={{width: 100 }} onChange={handleChange} >
      //           <Option value="曲面图">曲面图</Option>
      //           {/* <Option value="3D图">3D图</Option> */}
      //           <Option value="折线图">折线图</Option>
      //         </Select>
      //       </div>
      //       <div className='equipM_item'>
      //           <div key='hot_map' className='hOts'>热点图<img className='hotimges' src={hotPhoto}/><i className='inner_button'><Link to='/admin/adminHotMap'><LoginOutlined /></Link></i></div>
      //           <div key='wall_Loss' className='bighOT'><LtLine></LtLine><i className='inner_button'><Link to='/equipment/WallThicknessLoss'><LoginOutlined /></Link></i></div>
      //           <div key='resi_duas' className='hOT'><RtLine></RtLine><i className='inner_button'><Link to='/equipment/residuas'><LoginOutlined /></Link></i></div>
      //           <div key='corrosion_Rate' className='hOT'><SvLine></SvLine><i className='inner_button'><Link to='/equipment/corrosionRate'><LoginOutlined /></Link></i></div>
      //           <div key='avera_gec' className='hOT averhot'><AverageRateLine></AverageRateLine><i className='inner_button'><Link to='/equipment/averagec'><LoginOutlined /></Link></i></div>
      //       </div>
      //     </div>
      //   )
        break;
    }
    
}
const mapStateToProps = (state) => ({choice:state.equipmentPage.choice,equip:state.equipmentPage.equip});
const mapDispatchToProps = dispatch => {
  return {
    setChoice: dispatch.equipmentPage.setState,
    get2DAnd3D: dispatch.equipmentPage.get2DAnd3D,
    getBackImg: dispatch.equipmentPage.getBackImg,
  }
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(EquipmentMsg));